/*
 * @Author: lusx
 * @Date: 2019-02-18 13:40:42
 * @Last modified by:   lusx
 * @Last modified time: 08-04-2019 01:32:50
 */

import WeaTopHoc from '../hocs/weaTopHoc';
import SumCard from './sumCard/sumCard';
import GovernChart from '../governChart/governChart';
import { WeaRadioGroup } from 'ecCom'
import {toJS} from 'mobx';

//整体监控组件
@WeaTopHoc
class MonitorView extends React.Component {

    constructor(props) {
        super(props);
    }
  
    render() {
        const { count0, cardFootData, pies, type, config } = this.props;
        let newWidth = '100%';
        if (ReactDOM.findDOMNode(this)) {
            const width = ReactDOM.findDOMNode(this).clientWidth;
            newWidth = `${width / 4}px`;
        }
        return (
            <div className="g-searchGroup">
                <div className="advance-search-container1">
                    <WeaRadioGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaRadioGroup@v9l48r`} config={toJS(config)} onChange={this.doSearch.bind(this)} />
                </div>
                <div className="advance-search-container">
                    <SumCard ecId={`${this && this.props && this.props.ecId || ''}_SumCard@dz99dy`} cardData={count0} head={true} />
                </div>
                <div className="advance-search-container">
                    <GovernChart ecId={`${this && this.props && this.props.ecId || ''}_GovernChart@hizic3`} key={type} dataList={pies}  newWidth={newWidth} optionTemplate={this.templateFun} />
                    <SumCard ecId={`${this && this.props && this.props.ecId || ''}_SumCard@ircgvv`} cardData={pies} middle={true} />
                </div>
                <div className="advance-search-container">
                    <SumCard ecId={`${this && this.props && this.props.ecId || ''}_SumCard@8kgs14`} cardData={cardFootData} foot={true} />
                </div>
            </div>
        )
    }
    templateFun = (item = {}, index) => {
        const option = {
            series: [
                {
                    name: '业务指标',
                    type: 'gauge',
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            width: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 15,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto'
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 14.8,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            color: 'auto'
                        }
                    },
                    title: {
                        color: '#F2A945',
                        fontSize: '14.7'
                    },
                    detail: { formatter: '{value}%' },
                    data: [{ value: item.value || 0, name: item.text || '' }]
                }
            ]
        }
        return option;
    }

    doSearch=(params)=>{
        const {searchByDate} = this.props;
        searchByDate(params)
    }
}

export default MonitorView;
